<script src="<?= image_url('/static/assets/global/scripts/echarts.min.js') ?>"></script>
<div class="row">
    <div class="col-xs-12">
        <?= form_open('', Array('class' => 'form-inline', 'role' => 'form', 'id' => 'search-form')) ?>
        <div class="input-group input-large date-picker input-daterange" data-date="" data-date-format="yyyy-mm-dd">
            <input type="text" class="form-control" name="task_create_time_begin"
                   value="<?= filterValue('task_create_time_begin') ?>" placeholder="开始时间" autoComplete="off">
            <span class="input-group-addon">to </span>
            <input type="text" class="form-control" name="task_create_time_end"
                   value="<?= filterValue('task_create_time_end') ?>" placeholder="结束时间" autoComplete="off">
        </div>
        <?= search_form_dropdown('group_id', array('' => '选择销售组...') + $allGroups, filterValue('country'), '国家', 'class="form-control input-xs"'); ?>
        <?= search_form_dropdown('x_value', array('' => '选择图类型...') + [ 1 =>'年', 2 => '月', 3 => '日'], filterValue('x_value'), 'x轴', 'class="form-control input-xs"'); ?>
        <button type="reset" class="btn default" id="reset">重置条件</button>
        <button type="button" class="btn green about_search" id="ajax-look">查看 <i class="fa fa-search"></i></button>
        <?= form_close() ?>
        <div class="col-md-10" id="pie" style="height:400px;margin-top: 20px;"></div>
        <div class="col-md-2" id="panel-info" style="height:400px;margin-top: 20px;text-align: center;background: #3598dc;border-radius: 6px;padding-top:15px;padding-left: 25px;font-size: 15px;font-weight: bold;color: white;">

        </div>
        <div class="col-md-12" id="echart" style="height:400px;margin-top: 20px;"></div>
    </div>
</div>
<script>
    var searchData = {
        'task_create_time_begin': $("input[name='task_create_time_begin']").val(),
        'task_create_time_end': $("input[name='task_create_time_end']").val(),
        'group_id': $("select[name='group_id']").val(),
        'x_value': $("select[name='x_value']").val(),
    };
    var myChart = echarts.init(document.getElementById('echart'));
    optionChart = {
        xAxis: {
            type: 'category'
        },
        tooltip: {
            trigger: 'axis'
        },

        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        yAxis: {
            type: 'value'
        }
    };

    //饼图
    var myPie = echarts.init(document.getElementById('pie'));
    optionPie = {
        title: {
            text: '小组发布任务比例（默认最近一周）',
            subtext: '',
            x: 'right'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '组员任务发布占比',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myPie.setOption(optionPie);

    //初始化
    searchData.type = 'init';
    ajaxTaskData('<?=site_url("/information/task/ajaxTaskData")?>',myChart, searchData,function (res) {
        optionChart.legend = res.legend;
        optionChart.xAxis.data = res.xAxis.data;
        optionChart.series = res.series;
        myChart.setOption(optionChart,true);
    });

    ajaxTaskData('<?=site_url("/information/task/ajaxTaskPieData")?>',myPie, searchData,function (res) {
        var info = '';
        optionPie.legend.data = res.legend.data;
        optionPie.series[0].data = res.series.data;
        myPie.setOption(optionPie,true);
        var arr = res.series.data;
        for(var i = 0;i< arr.length;i++){
            info += '<div style="display: flex;justify-content: space-between;margin-top: 12px;">'+arr[i].name+':'+arr[i].value+'</div>'
        }
        $('#panel-info').html(info);
    });

    //搜索
    $('#ajax-look').click(function () {
        var searchData = {
            'task_create_time_begin': $("input[name='task_create_time_begin']").val(),
            'task_create_time_end': $("input[name='task_create_time_end']").val(),
            'group_id': $("select[name='group_id']").val(),
            'x_value': $("select[name='x_value']").val(),
        };
        if($("select[name='x_value']").val() != '' && ($("input[name='task_create_time_begin']").val() == '' || $("input[name='task_create_time_end']").val() == '')){
            toastr.error('请选择时间段','失败');
            return;
        }

        if(($("input[name='task_create_time_begin']").val() != '' || $("input[name='task_create_time_end']").val() != '') && $("select[name='x_value']").val() == '' ){
            toastr.error('请选择合适的线类型','失败');
            return;
        }

        if (searchData['task_create_time_begin'] == '' || searchData['task_create_time_end'] == ''){
            searchData.type = 'init';
        }

        ajaxTaskData('<?=site_url("/information/task/ajaxTaskData")?>',myChart, searchData,function (res) {
            optionChart.legend = res.legend;
            optionChart.xAxis.data = res.xAxis.data;
            optionChart.series = res.series;
            console.log(optionChart);
            myChart.setOption(optionChart,true);
        });

        ajaxTaskData('<?=site_url("/information/task/ajaxTaskPieData")?>',myChart, searchData,function (res) {
            var info = '';
            optionPie.legend.data = res.legend.data;
            optionPie.series[0].data = res.series.data;
            myPie.setOption(optionPie,true);

            var arr = res.series.data;
            for(var i = 0;i< arr.length;i++){
                info += '<div style="display: flex;justify-content: space-between;margin-top: 12px;">'+arr[i].name+':'+arr[i].value+'</div>'
            }
            $('#panel-info').html(info);
        });
    });

    function ajaxTaskData(url,chartId, data,successCallback) {
        $.ajax({
            url: url,
            data: data,
            method: 'POST',
            dataType: 'json',
            success: function (res) {
                if (res.success) {
                    successCallback(res.data);
                } else {
                    console.log('error');
                }
            },
            fail: function (res) {
                console.log('error')
            }
        });
    }
</script>